<template>
	<!-- 三违分析 -->
	<view class="p-10">
		<view class="card">
			<uni-section type="line" class="mb-10" title="隐患变化趋势">
				<view class="flex s-center m-center">
					<u-radio-group v-model="radioValue" placement="row">
						<u-radio label="日" name="day"></u-radio>
						<u-radio label="周" class="m-l-10" name="week"></u-radio>
						<u-radio label="月" class="m-l-10" name="month"></u-radio>
					</u-radio-group>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" ontouch />
				</view>
			</uni-section>
		</view>
		<view class="card">
			<uni-section type="line" class="mb-10" title="隐患分布统计">
				<view class="flex s-center m-center">
					<u-radio-group v-model="radioValue1" placement="row">
						<u-radio label="隐藏专业" name="specialty"></u-radio>
						<u-radio label="地点" class="m-l-10" name="location"></u-radio>
						<u-radio label="部门单位" class="m-l-10" name="dept"></u-radio>
					</u-radio-group>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" ontouch />
				</view>
			</uni-section>
		</view>
	</view>
</template>
<script setup>
import { ref, watch } from 'vue';
import { hiddenDangerDistributeChart, hiddenDangerChangeChart } from '@/api/hidden-danger.js';

const baseOpts = {
	padding: [20, 0, 5, 0],
	dataLabel: false,
	enableScroll: true,
	fontSize: 10
};
let chartData = ref({}),
	chartData1 = ref({}),
	radioValue = ref('month'),
	radioValue1 = ref('specialty');
const opts = {
	extra: {
		line: {
			gridType: 'radar',
			gridColor: '#CCCCCC',
			gridCount: 4,
			opacity: 0.4,
			max: 0,
			labelColor: '#0853FF',
			labelShow: true,
			border: true
		}
	},
	xAxis: {
		rotateLabel: true,
		rotateAngle: 30,
		itemCount: 6
	},
	...baseOpts
};
const opts1 = {
	extra: {
		column: {
			type: 'group',
			width: 10
		}
	},
	legend: {
		show: false
	},
	xAxis: {
		rotateLabel: true,
		rotateAngle: 30,
		itemCount: 6,
		format: 'text'
	},
	...baseOpts
};
// 隐患变化趋势
const getData = async (type) => {
	try {
		const { data } = await hiddenDangerChangeChart({
			type
		});
		let res = {
			categories: data.names,
			series: [
				{
					name: '新增隐患',
					data: data.addNums
				},
				{
					name: '整改隐患',
					data: data.changeNums
				}
			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
	} catch (e) {
		//TODO handle the exception
	}
};
// 隐患分布
const getData1 = async (type) => {
	try {
		const { data } = await hiddenDangerDistributeChart({
			type
		});
		let res = {
			categories: data.names,
			series: [
				{
					name: '',
					data: data.nums
				}
			]
		};
		chartData1.value = JSON.parse(JSON.stringify(res));
	} catch (e) {
		//TODO handle the exception
	}
};
watch(
	() => radioValue.value,
	(val) => {
		getData(val);
	},
	{
		immediate: true
	}
);
watch(
	() => radioValue1.value,
	(val) => {
		getData1(val);
	},
	{
		immediate: true
	}
);
</script>
<style lang="scss" scoped>
:deep(.u-radio-group--row) {
	justify-content: center;
}
</style>
